<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <style>
        .box{
            width:200px;
            height: 200px;
            background: darkcyan;
            color: #dfdfdf;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <h2>msg == {{msg }}</h2>
        <m-head></m-head>
        
        <parent></parent>
    </div>



    <template id="parent">
        <div>
            <h2>parent - parent - 1 </h2>
            <hr>
            <childone :num="num" ref="one" ></childone>
            <hr>
            <childtwo
                @changenum="setNum"
                :changepnum ="setNum"
                @changeoneshow="changeshow"
                :changeshow = "changeshow"
            ></childtwo>
        </div>
    </template>
    
    <template id="childone">
        <div>
            <h2>childone - childone -  1 </h2>
            <h2>count === {{count}}</h2>
            <h2>word --- {{word }}</h2>
            <h2>props - num  = {{num}}</h2>
            <p class="box" v-show="show">
                我是被子组件 two 控制的 
            </p>
        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2>childtwo - childtwo -  2  </h2>
            <button @click="changeonecount">点击修改 one的count </button>
            <p>
                <input type="text" @input="changeword" placeholder="修改one-word">
            </p>
            <button @click="changebyparent">点击修改 num  </button>
            <button @click="change">自定义事件 点击修改 num  </button>
            <button @click="changepnum(88)">反向props 去修改 num </button>
            <hr>
            <button @click="changeshow1">parent 点击修改 show   </button>
            <button @click="changeshow2">自定义 点击修改 show   </button>
            <button @click="changeshow" >反向props  点击修改 show   </button>


        </div>
    </template>
    <script>
        // 全局注册
        const bus = new Vue()   // $emit $on $once 
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        Vue.component("parent",{
            template:"#parent",
            data(){
                return {
                    num:2116 
                }
            },
            methods:{
                setNum(n){
                    this.num+=n;
                },
                changeshow(){
                    this.$refs.one.show  = !this.$refs.one.show
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            data(){
                return {
                    count:1000,
                    word:"Vue is so easy",
                    show:true 
                }
            },
            props:['num'],
            mounted(){
                bus.$on("changeonecount",n=>{
                    this.count+=n;
                })

                bus.$on("changeword",word=>{
                    this.word = word;
                })
            }
        })
        Vue.component("childtwo",{
            template:"#childtwo",
            props:['changepnum','changeshow'],
            methods:{
                changeonecount(){
                    bus.$emit('changeonecount',100)
                },
                changeword(e){
                    bus.$emit('changeword',e.target.value )
                },
                changebyparent(){
                    this.$parent.num++
                },
                change(){
                    this.$emit("changenum",10);
                },
                changeshow1(){
                    this.$parent.$refs.one.show = !this.$parent.$refs.one.show
                },
                changeshow2(){
                    this.$emit('changeoneshow');
                }
            }
        })

        const vm = new Vue({
            // el:"#app",
            components:{
            },
            data:{
                title:"Vue 组件通信 (兄弟组件通信) ",
                msg:"小型、独立和通常可复用的组件构建大型应用"
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
            }
        }).$mount("#app")
    </script>

      <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit  发送
        On    监听 
        Once  只触发一次  


        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs      
        c. 事件center总线 (bus new Vue)
        d. events 事件 
        e. vuex (最后一天) 

        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  逆向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件center总线   
        e.  vuex   

        3.  兄弟组件之间的通信  
        a. 事件center总线 (bus new Vue)  新建空的Vue  $emit $on  $once 
        b. 中间人模式  (子改父  父改子 )   把父亲当做中间人   6种 
        c. vuex  

        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数  
     -->
</body>
</html>